<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .error {
            background: red;
            color: white;
        }

        .success {
            background: green;
            color: white;
        }
    </style>
</head>

<body>
    <form name="form">
        <fieldset>
            <legend>注册</legend>
            <p>
                用户 <input type="text" name="username">
                <span id="usernameError" style="display: none;">用户名必须3-18个字符</span>
            </p>
            <p>
                邮箱 <input type="text" name="email">
                <span id="emailError" style="display: none;">邮箱格式错误</span>
            </p>
            <p>
                手机 <input type="text" name="phone">
                <span id="phoneError" style="display: none;">手机格式错误</span>
            </p>
            <p>
                年龄 <input type="number" name="age">
                <span id="ageError" style="display: none;">年龄必须10-80岁</span>
            </p>
            <p>
                性别
                <input type="radio" name="gender" value="1" checked> 男
                <input type="radio" name="gender" value="2"> 女
            </p>

            <p>
                <button type="button" id="submitBtn">提交</button>
            </p>
        </fieldset>
    </form>
    <script>
        // 表单验证
        // 用户名
        // 密码
        // 确认密码
        // 邮箱
        // 手机
        const regs = {
            username: /^[a-z]{3,18}$/,
            phone: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            email: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
        }

        function valid(name, fn) {
            const error = document.getElementById(`${name}Error`);
            let flag = false
            if (fn) {
                flag = fn(document.form[name].value);
            } else {
                flag = regs[name].test(document.form[name].value);
            }
            if (flag) {
                error.style.display = 'none'
            } else {
                error.style.display = ''
            }
            return flag;
        }



        document.oninput = function (e) {
            const target = e.target;
            const name = target.name;
            // const value = target.value;
            // if (name === 'username') {
            //     valid('username');
            // }

            // if (name === 'email') {
            //     valid('email');
            // }

            // if (name === 'phone') {
            //     valid('phone');
            // }

            if (name === 'age') {
                valid('age', (value) => +value >= 10 && +value <= 80);
            } else {
                valid(name);
            }
        }

        submitBtn.onclick = function () {
            const r1 = valid('username');
            const r2 = valid('phone');
            const r3 = valid('email');

            // 自定义验证规则
            const r4 = valid('age', (value) => {
                return +value >= 10 && +value <= 80;
            });

            if (r1 && r2 && r3 && r4) {
                console.log('success');
            }
        }

    </script>
</body>

</html>